<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>导航条</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!--
	1.基本:所有元素都被包容与container容器
		1)	.navbar
		2)	.navbar-default 			//默认样式
			.navbar-inverse 			//黑色样式
		3)	.navbar-brand 				//上下居中
		4)	.navbar-header 				//所有标题的容器，带左浮动
		5)	.nav 						//对ul添加，水平排列
		6)	.navbar-nav 				//对ul添加，水平排列

	2.与表单元素组合
		1)	.navbar-form 				//对新建的form添加
	
	3.与按钮元素组合
		1)	.navbar-btn 				//对btn的直接父级容器添加

	4.与文本元素组合
		1)	.navbar-text 				//有时还需要对其他元素添加.navbar-left

	5.与超链接元素组合
		1)	.navbar-link 				//一般放在文本元素p标签内(因为a是内联元素)		
	
	6.导航栏固定顶/底部(不受滚动条影响)
		1)	.navbar-fixed-top 			//完全充满宽度(body的margin失效,下同)
			.navbar-fixed-bottom

	7.静态导航
		1)	.navbar-static-top 			//对最外层容器添加。
			.navbar-static-bottom 		//与页面等宽的导航条(body的margin还在,上同)，只是去掉了圆角

	8)	.navbar-right 				//对ul添加。对齐方式。右浮动
		.navbar-left 				//对ul添加。左浮动(默认)

	*)	.disabled 					//禁用状态

 -->
	
	<!-- <nav class="navbar navbar-inverse"> -->

	<!-- 6.导航栏固定顶部(不受滚动条影响) -->
	<!-- <nav class="navbar navbar-default navbar-fixed-top"> -->

	<!-- 7.静态导航 -->
	<nav class="navbar navbar-default navbar-static-top">

		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">标题</a>
			</div>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">首页</a></li>
				<li><a href="#">产品</a></li>
				<li class="disabled"><a href="#">资讯</a></li>
				<li><a href="#">关于</a></li>
			</ul>
			
			<!-- 2.与表单元素组合 -->
			<!-- <form class="navbar-form navbar-right">
				<div class="input-group">
					<input class="form-control" type="text">
					<div class="input-group-btn">
						<button class="btn btn-default">提交</button>
					</div>
				</div>
			</form> -->

			<!-- 3.与按钮元素组合 -->
			<!-- <button class="btn btn-default navbar-btn navbar-right">按钮</button>
 -->
			<!-- 4.与文本元素组合 -->
			<!-- <p class="navbar-text">文本1</p>
 -->
			<!-- 5.与超链接元素组合 -->
			<p class="navbar-text">文本1<a class="navbar-link" href="#">超链接</a></p>
		</div>
	</nav>













	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>